<template>
  <t-dialog :visible="dialogVisible" size="tomato" @dialog-close="handleCancel">
    <div slot="title" class="app-toolbox-xmap-tomato-dialog__header">番茄信息</div>
    <div slot="content" v-if="dialogType === 'create' && tomatoState.currentState === 'other'" class="app-toolbox-xmap-tomato-dialog__content">是否启动番茄工作？</div>
    <div slot="content" v-else-if="dialogType === 'quit' && tomatoState.currentState === 'other'" class="app-toolbox-xmap-tomato-dialog__content">是否退出番茄工作？</div>
    <div slot="content" v-else class="app-toolbox-xmap-tomato-dialog__content">
      <div class="app-toolbox-xmap-tomato-dialog__content__progress-circile-wrapper">
        <t-progress-circle status = "normal" :percent="tomatoState.currentPercent">
          <div slot="title">
            <div v-if="tomatoState.currentState === 'work'">番茄阶段：工作</div>
            <div v-else-if="tomatoState.currentState === 'rest'">番茄阶段：休息</div>
            <div v-else>番茄阶段：就绪</div>
            <div>番茄进度: {{ tomatoState.currentTime }}</div>
            <div>番茄目标： {{ tomatoState.currentTotalTime}}</div>
          </div>
          <img slot="rate" :src="tomatoPic"></img>
        </t-progress-circle>
      </div>
    </div>
    <div slot="footer" v-if="dialogType === 'create' && tomatoState.currentState === 'other'" class="app-toolbox-xmap-tomato-dialog__footer">
      <t-button size="normal" type="warning" @click="handleOnlyRead">不用开启，仅仅浏览</t-button>
      <t-button size="normal" type="primary" @click="handleCreate">开启番茄，专注工作</t-button>
    </div>
    <div slot="footer" v-if="dialogType === 'info' && tomatoState.currentState === 'other'" class="app-toolbox-xmap-tomato-dialog__footer">
      <t-button size="normal" type="delete" @click="handleQuit">结束工作</t-button>
      <t-button size="normal" type="primary" @click="handleCreate">再次开启番茄，专注工作</t-button>
    </div>
    <div slot="footer" v-if="dialogType === 'quit' && tomatoState.currentState !== 'other'" class="app-toolbox-xmap-tomato-dialog__footer">
      <t-button size="normal" type="delete" @click="handleQuit">放弃番茄，结束工作</t-button>
      <t-button size="normal" type="primary" @click="handleCancel">保留番茄，继续工作</t-button>
    </div>
    <div slot="footer" v-if="dialogType === 'quit' && tomatoState.currentState === 'other'" class="app-toolbox-xmap-tomato-dialog__footer">
      <t-button size="normal" type="primary" @click="handleCreate">开启番茄，专注工作</t-button>
      <t-button size="normal" type="delete" @click="handleQuit">结束工作</t-button>
    </div>
  </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TProgressCircle from '@/components/progress-circle';
  import tomato from '@/assets/rate/tomato.svg';
  
  export default {
    name: 'app-toolbox-xmap-navbar-tomato-rest-dialog',
    components: {
      TDialog,
      TButton,
      TProgressCircle,
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      type: {
        type: String,
        default: 'quit',
      },
      tomatoState: {
        type: Object,
        required: true,
      },
    },
    computed: {
      dialogVisible() {
        return this.visible;
      },
      dialogType() {
        return this.type;
      },
      tomatoPic() {
        return tomato;
      },
    },
    methods: {
      handleCancel() {
        if (this.tomatoState.currentState === 'rest') return;
        this.$emit('cancel');
      },
      handleQuit() {
        this.$emit('quit');
      },
      handleCreate() {
        this.$emit('create');
      },
      handleOnlyRead() {
        this.$emit('cancel');
      },
    },
  };
</script>